<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单通知测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .section {
            margin-bottom: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .notification {
            padding: 10px;
            margin: 5px 0;
            background-color: #f8f9fa;
            border-left: 4px solid #007bff;
        }
        button {
            padding: 8px 15px;
            margin: 5px;
            cursor: pointer;
        }
        input[type="text"] {
            padding: 8px;
            margin: 5px;
            width: 200px;
        }
        pre {
            background-color: #f5f5f5;
            padding: 10px;
            border-radius: 5px;
            overflow-x: auto;
        }
        .instruction {
            background-color: #e2f0ff;
            padding: 15px;
            margin: 15px 0;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <h1>简单通知测试</h1>
    
    <div class="instruction">
        <h3>使用说明</h3>
        <p>1. 请确保已安装CORS浏览器插件并启用（如Chrome的"CORS Unblock"插件）</p>
        <p>2. 请确保后端服务正在运行（http://localhost:8080）</p>
        <p>3. 输入用户ID和Token，然后点击"创建通知"按钮</p>
    </div>

    <div class="section">
        <h2>创建通知</h2>
        <div>
            <input type="text" id="userId" placeholder="用户ID">
            <input type="text" id="token" placeholder="Token" style="width: 300px;">
            <select id="notificationType">
                <option value="message">消息通知</option>
                <option value="favorite">收藏通知</option>
                <option value="transaction">交易通知</option>
                <option value="system">系统通知</option>
            </select>
            <input type="text" id="content" placeholder="通知内容">
            <input type="text" id="relatedId" placeholder="关联ID">
            <button onclick="createNotification()">创建通知</button>
        </div>
        <div id="result"></div>
    </div>

    <div class="section">
        <h2>通知模拟</h2>
        <button onclick="addMockNotification()">添加模拟通知</button>
        <div id="notifications"></div>
    </div>

    <script>
        const API_BASE_URL = 'http://localhost:8080/api';
        
        // 创建通知
        function createNotification() {
            const userId = document.getElementById('userId').value;
            const token = document.getElementById('token').value;
            const type = document.getElementById('notificationType').value;
            const content = document.getElementById('content').value;
            const relatedId = document.getElementById('relatedId').value;

            if (!userId || !token || !content) {
                alert('请输入用户ID、Token和通知内容');
                return;
            }

            const tokenWithBearer = token.startsWith('Bearer ') ? token : `Bearer ${token}`;
            
            // 构建通知数据
            const data = {
                userId: parseInt(userId),
                type: type,
                content: content,
                relatedId: relatedId ? parseInt(relatedId) : null
            };
            
            // 发送请求
            fetch(`${API_BASE_URL}/notifications/create`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': tokenWithBearer
                },
                body: JSON.stringify(data)
            })
            .then(response => {
                document.getElementById('result').innerHTML = `
                    <h3>请求状态: ${response.status}</h3>
                    <p>状态文本: ${response.statusText}</p>
                `;
                return response.json().catch(e => {
                    return { error: "无法解析JSON响应" };
                });
            })
            .then(data => {
                const resultDiv = document.getElementById('result');
                resultDiv.innerHTML += `<pre>${JSON.stringify(data, null, 2)}</pre>`;
                
                if (data.code === 200) {
                    // 创建成功，添加到通知列表
                    const notification = {
                        type: type,
                        content: content,
                        created_at: new Date().toISOString()
                    };
                    addNotification(notification);
                }
            })
            .catch(error => {
                document.getElementById('result').innerHTML += `
                    <p style="color: red;">错误: ${error.message}</p>
                    <p>请确保已安装CORS浏览器插件并启用</p>
                `;
            });
        }
        
        // 添加模拟通知
        function addMockNotification() {
            const types = ['message', 'favorite', 'transaction', 'system'];
            const type = types[Math.floor(Math.random() * types.length)];
            const notification = {
                type: type,
                content: `这是一个模拟的${type}通知 - ${new Date().toLocaleTimeString()}`,
                created_at: new Date().toISOString()
            };
            addNotification(notification);
        }

        // 添加通知到列表
        function addNotification(notification) {
            const notificationsDiv = document.getElementById('notifications');
            const notificationDiv = document.createElement('div');
            notificationDiv.className = 'notification';
            
            let content = '';
            switch (notification.type) {
                case 'message':
                    content = `新消息: ${notification.content}`;
                    break;
                case 'favorite':
                    content = `收藏通知: ${notification.content}`;
                    break;
                case 'transaction':
                    content = `交易通知: ${notification.content}`;
                    break;
                case 'system':
                    content = `系统通知: ${notification.content}`;
                    break;
                default:
                    content = `通知: ${notification.content}`;
                    break;
            }
            
            const timestamp = notification.created_at 
                ? new Date(notification.created_at).toLocaleString()
                : new Date().toLocaleString();
            
            notificationDiv.innerHTML = `
                <div>${content}</div>
                <div style="font-size: 0.8em; color: #666;">${timestamp}</div>
            `;
            
            notificationsDiv.insertBefore(notificationDiv, notificationsDiv.firstChild);
        }
    </script>
</body>
</html> 